<template>
  <div>
    <el-card>
      <!-- 第一部分 -->
      <moreInput
        :base-que-obj="baseQueObj"
        @clearForm="clearForm"
        @checkFn="getBaseQueBankList"
      />

      <!-- 第二部分 -->
      <div style="margin-top: 10px">
        <el-alert
          :title="`共${total}条记录`"
          type="info"
          show-icon
          :closable="false"
        />
      </div>
      <!-- 第三部分 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120px" />
        <el-table-column prop="subject" label="学科" width="120px" />
        <el-table-column prop="catalog" label="目录" width="120px" />
        <el-table-column prop="questionType" label="题型" width="120px">
          <template slot-scope="{ row }">
            {{
              row.questionType === '1'
                ? '单选'
                : row.questionType === '2'
                ? '多选'
                : '简答'
            }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280px">
          <template slot-scope="scope">
            <span v-html="scope.row.question" />
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180px">
          <template slot-scope="{ row }">
            {{ formatTime(row.addDate, 'YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80px">
          <template slot-scope="{ row }">
            {{
              row.difficulty === '1'
                ? '简单'
                : row.difficulty === '2'
                ? '一般'
                : '困难'
            }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120px" />
        <el-table-column prop="chkState" label="审核状态" width="120px">
          <template slot-scope="{ row }">
            {{
              row.chkState === 0 ? '待审' : row.chkState === 1 ? '通过' : '拒绝'
            }}
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150px" />
        <el-table-column prop="chkUser" label="审核人" width="120px" />
        <el-table-column prop="publishState" label="发布状态" width="150px">
          <template slot-scope="scope">
            {{ scope.row.publishState === 0 ? '下架' : '上架' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200px">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="handleCheck(row)">
              预览
            </el-button>
            <!-- :disabled="!!row.chkState"--两个感叹号作用时强制转换成布尔值 -->
            <el-button
              type="text"
              size="small"
              :disabled="!!row.chkState"
              @click="processFn(row)"
            >
              {{
                row.chkState === 0
                  ? '待审'
                  : row.chkState === 1
                  ? '通过'
                  : '拒绝'
              }}
            </el-button>
            <el-button type="text" size="small" @click="updateFn(row)">
              修改
            </el-button>
            <el-button type="text" size="small" @click="onIt(row)">
              {{ row.publishState === 0 ? '上架' : '下架' }}
            </el-button>
            <el-button type="text" size="small" @click="deleteFn(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 预览弹层 -->
    <previewDialogVue
      ref="perDialog"
      :flag="flag"
      :dialog-form-visible.sync="dialogFormVisible"
    />
    <!-- 审核弹层 -->
    <processDialogVue
      :id="userId"
      :dialog-show.sync="dialogShow"
      @Refresh="getBaseQueBankList"
    />
  </div>
</template>

<script>
import moreInput from '@/components/moreInput/moreInput.vue'
import {
  getChoiceBankApi,
  intoSelectedApi,
  publishSelectedApi
} from '@/api/queBank'
import { formatTime } from '@/filter'
import previewDialogVue from './components/previewDialog.vue'
import processDialogVue from './components/processDialog.vue'

export default {
  components: {
    moreInput,
    previewDialogVue,
    processDialogVue
  },
  data() {
    return {
      // 基础学科对象
      baseQueObj: {
        // 学科
        subjectID: '',
        // 二级目录
        catalogID: '',
        // 标签
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 省份
        province: '',
        // 城市
        city: ''
      },
      // 表格数据列表
      tableData: [],
      // 当前页
      page: 1,
      // 每页的数据条数
      pagesize: 5,
      // 总数
      total: 0,
      // 预览弹层的显隐
      dialogFormVisible: false,
      // 标志--为精选题库
      flag: true,
      // 控制审核弹层的显隐
      dialogShow: false,
      // 当前点击的题目的id
      userId: 1
    }
  },
  watch: {},
  created() {
    this.getBaseQueBankList({
      page: this.page,
      pagesize: this.pagesize
    })
  },
  methods: {
    formatTime,
    // 改变每页的条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getBaseQueBankList({
        page: this.page,
        pagesize: this.pagesize
      })
    },
    // 改变当前的页码
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getBaseQueBankList({
        page: this.page,
        pagesize: this.pagesize
      })
    },
    // 获取精选题库列表
    async getBaseQueBankList(val) {
      const res = await getChoiceBankApi(val)
      // res.data.items.forEach((item) => {
      //   // item.addDate = formatTime(item.addDate, 'YYYY-MM-DD')
      // })
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 清空搜索栏数据
    clearForm() {
      this.baseQueObj = {
        // 学科
        subjectID: '',
        // 二级目录
        catalogID: '',
        // 标签
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 省份
        province: '',
        // 城市
        city: ''
      }
    },
    // 预览
    handleCheck(row) {
      this.dialogFormVisible = true
      this.$refs.perDialog.getBaseQueBankInfo(row.id)
    },
    // 审核--processApi
    async processFn(row) {
      this.userId = row.id
      this.dialogShow = true
      // await processApi(row.id)
    },
    // 精选题库修改--走基础题库的修改--updateQueInfoApi
    updateFn(row) {
      // eslint-disable-next-line object-curly-spacing
      this.$router.push({ path: '/questions/new', query: { id: row.id } })
    },
    // 上架--publishSelectedApi
    onIt(row) {
      const num = row.publishState === 0 ? 1 : 0
      this.$confirm('此操作将会上架或下架, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await publishSelectedApi(row.id, num)
          this.getBaseQueBankList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除--走加入或者移除精选库--intoSelectedApi
    deleteFn(row) {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await intoSelectedApi(row.id, 0)
          this.getBaseQueBankList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style></style>
